<template>
	<view class="wrap">
		<image src="../../../static/uview/common/z_big-img.png" mode="widthFix"></image>
		<view class="items">
			<view class="li" v-for="(item,index) in list" @click="goToPage(item)" >
				<view class="headImg">
					<image src="../../../static/uview/common/位图.png" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view class="info">
					{{item.name}}
				</view>
			</view>
			<view style="clear: both;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[{name:"礼仪服务"},{name:"祭奠亲友/代客祭扫"},{name:"机器人祭拜"},{name:"VR云祭祀"}]
			}
		},
		methods: {
			goToPage(item){
				if(item.name == '礼仪服务'){ // 跳转 礼仪服务页面
					this.$u.route({
						url:'/pages/view/fuzepark/ceremonyserve/ceremonyserve'
					})
				}
				else if(item.name == '祭奠亲友/代客祭扫'){ // 跳转 祭奠亲友页面
					this.$u.route({
						url:'/pages/view/fuzepark/hold/hold'
					})
				}
				else if(item.name == '机器人祭拜'){
					 console.log('机器人祭拜')
				}
				else if(item.name == 'VR云祭祀'){
					 console.log('VR云祭祀')
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.items{
		width: 100%;
		margin: 100upx auto;
		.li{
			width: 38%;
			margin: 80upx 6%;
			background-image: linear-gradient(to top,green,white);
			border-radius: 20upx;
			position: relative;
			padding: 15% 0;
			float: left;
			.info{
				width: 100%;
				text-align: center;
				font-size:32upx;
				color: white;
				position: absolute;
				bottom: 30upx;
			}
		}
	}
	.wrap{
		padding-bottom: 100upx;
	}
	.headImg{
		position: absolute;
		width: 60%;
		height: 60%;
		top: 0;
		left: 50%;
		border-radius: 50%;
		transform: translate(-50%,-50%);
		overflow: hidden;
	}
</style>
